<template>
    <div class="concat-box">
    <el-dialog title="多表关联" 
    :visible.sync="concatBoxVisible" width="60%"
    :close-on-click-modal="false"
    :show-close="false">
      <div class="content">
          <ul class="sheet-name-list">
              <li v-for="loadSheet in getLoadSheet" :key="loadSheet.showName" @click="setActive(loadSheet)">
                  <input type="checkbox" name="sheetName" :value="loadSheet.showName" v-model="sheetNames" />
                  {{loadSheet.showName}}
              </li>
          </ul>
          <div class="table">
              <div v-if="table == ''">
                  <h2>暂无点击任何预览数据</h2>
              </div>

              <div v-else v-html="table"></div>
          </div>
      </div>
      <div class="concat-sheet-name">
            <el-input placeholder="请输入关联后表的名字" v-model="sheetName"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setConcatBoxVisible(false)">取 消</el-button>
        <el-button type="primary" @click="concat">确 定</el-button>
      </span>
    </el-dialog>
    </div>
</template>

<script>
export default {
    props:['concatBoxVisible'],
    data(){
        return{
            sheetNames:[],
            sheetName:"",
            activeSheetName:'',
            table: '',
        };
    },
    computed: {
        getLoadSheet(){
            return this.$store.state.loadSheet.loadSheetList
        }
    },
    methods:{
        setConcatBoxVisible(val){
            this.$emit('set-concat-box-visible', val)
        },
        setActive(loadSheet){
            this.activeSheetName = loadSheet.showName
            this.table = loadSheet.table
        },
        concat(){
            if(!this.sheetNames.length){
                this.$message.error("请选择需要关联的表")
                return
            }

            else if(this.sheetNames.length == 1){
                this.$message.error("多表关联至少需要2张表")
                return
            }

            else if(this.sheetName == ""){
                this.$message.error("请输入关联后表的名字")
                return
            }

            let data = {
                sheetName: this.sheetName,
                sheetNames: this.sheetNames
            }

            this.$axios.post('/concat', data)
            .then(res => {
                if(res.code == 200){
                    this.setConcatBoxVisible(false)
                    
                    this.$store.commit('addLoadSheetList', res.data)
                    this.$message({
                        type:'success',
                        message: res.msg
                    })
                }
            })

        },
    },
    mounted(){
        console.log(this.getLoadSheet)
    }
}
</script>

<style>
    .concat-box .table table th{
        padding:0 15px 0 15px;
    }
</style>

<style scoped>
    .concat-box  .content{
        display:flex;
    }

    .concat-box .content .table{
        overflow: auto;
        max-height: 250px;
    }

    .concat-sheet-name{
        margin-top:20px;
    }

    .sheet-name-list{
        list-style-type: none;
        user-select: none;
        padding:0px;
        width:20%;
    }

    .content .table{
        width:80%;
        padding:0 0 20px 20px;
        border-left: 1px solid rgb(224, 213, 213);
        text-align: center;
    }

    .sheet-name-list li{
        padding:8px;
    }

    .sheet-name-list li:hover{
        background-color: rgb(244,244,244,244)    
    }
</style>